<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USERDETAIL</title>

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"
          th:href="@{/LoginStyle/css/bootstrap.min.css}">
    <!-- DataTables -->
    <link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"
          th:href="@{/AdminStyle/css/dataTables.bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">
    <link rel="stylesheet" href="button.css" th:href="@{/indexStyle/css/button.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .sns-box {
            border-left: 1px solid #000;
            padding-top: 30px;
            padding-left: 30px;
        }

        .ul-box {
            margin-bottom: 30px;
        }

        .ul-box li span {
            float: left;
            color: #66667F;
            width: 70px;
            margin-right: 20px;
        }

        .ul-box li {
            padding-left: 35px;
            margin-bottom: 30px;
        }

        .ul-box li input {
            width: 300px;
            background-color: #F2F3F7;
            border: none;
            border-bottom: 1px solid #BDC0CC;
        }

        .hui-label {
            height: 30px;
            width: 100%;
            line-height: 30px;
            padding-left: 5px;
            background-color: #B0BCCA;
            margin-bottom: 30px;
        }

        .blue-label {
            height: 50px;
            width: 100%;
            line-height: 50px;
            font-size: 14px;
            padding-left: 20px;
            /* color: #C59592; */
            background-color: skyblue;
            margin-bottom: 30px;
        }

        .blue-label span {
            width: 30px;
            color: red;
        }

        .dr {
            margin-left: 120px;
        }

        .ch-box {
            margin-left: 125px;
            margin-bottom: 10px;
        }

        .tb-body td {
            height: 60px;
            padding: 0 !important;
            text-align: center;
        }
    </style>
</head>

<body class="cnt-home">
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class='row'>
            <div class='col-xs-12 col-sm-12 col-md-3 sidebar'>
                <!-- ================================== TOP NAVIGATION ================================== -->
                <div class="side-menu animate-dropdown outer-bottom-xs">
                    <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> 账户管理</div>
                    <nav class="yamm megamenu-horizontal">
                        <ul class="nav">
                            <li>
                                <a href="userdetail.html" class="dropdown-toggle " th:href="@{/User/userdetail}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>个人信息</a>
                            </li>
                            <li>
                                <a href="useraddress.html" class="dropdown-toggle active "
                                   th:href="@{/User/useraddress}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收货地址</a>
                            </li>
                            <li>
                                <a href="userwishlist.html" class="dropdown-toggle" th:href="@{/User/userwishlist}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收藏</a>
                            </li>
                            <li>
                                <a href="usercart.html" class="dropdown-toggle" th:href="@{/User/usercart}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>购物车</a>
                            </li>
                            <li>
                                <a href="changepwd.html" class="dropdown-toggle" th:href="@{/User/changepwd}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>更改密码</a>
                            </li>
                            <li>
                                <a href="userorder.html" class="dropdown-toggle " th:href="@{/User/userorder}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>订单</a>
                            </li>
                        </ul>
                        <!-- /.nav -->
                    </nav>
                    <!-- /.megamenu-horizontal -->
                </div>
                <!-- /.side-menu -->
            </div>
            <div class="col-xs-12 col-sm-12 col-md-9">
                <div class="ul-box sns-box">
                    <label class="hui-label">添加地址</label>
                    <ul>
                        <li>
                            <span>收货地址:</span><input type="text" name="" id="address" placeholder="请输入详细地址信息">
                        </li>
                        <li><span>邮编:</span><input type="text" name="" id="postalCode" placeholder="请填写邮编"></li>
                        <li><span>收货人姓名:</span><input type="text" name="" id="persion" placeholder="请输入收货人姓名"></li>
                        <li><span>联系号码:</span><input type="text" name="" id="phone" placeholder="请输入准确联系号码"></li>
                    </ul>
                    <div class="ch-box">
                        <input id="checkbox" type="checkbox"><span>设为默认收货地址</span>
                    </div>
                    <div class="button dr">
                        <a href="#" id="submit">保存</a>
                    </div>
                </div>
                <div><label class="blue-label">
                    <span class="glyphicon glyphicon-exclamation-sign"></span>已保存<span th:text="${count}">1</span>条地址,还能保存<span
                        th:text="${moreCount}">9</span>条地址</label>
                </div>
                <div class="tb-body">
                    <table id="example2" class="table table-bordered">
                        <thead>
                        <tr>
                            <th>收货人</th>
                            <th>地址</th>
                            <th>邮编</th>
                            <th>联系方式</th>
                            <th>修改</th>
                            <th>删除</th>
                            <th>默认</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="address : ${AddressList}">
                            <td th:text="${address.persion}">张三</td>
                            <td th:text="${address.address}">xxx省</td>
                            <td th:text="${address.postalCode}">456641</td>
                            <td th:text="${address.phone}">1552333040</td>
                            <td><a href="#" class="change">修改</a></td>
                            <td><a href="#" class="delete">删除</a></td>
                            <td>
                                <a href="#" th:id="${address.id}" class="flag">设为默认</a>
                                <span style="display: none;">默认地址</span>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js" th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"
        th:src="@{/AdminStyle/js/jquery.dataTables.min.js}"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"
        th:src="@{/AdminStyle/js/dataTables.bootstrap.min.js}"></script>

<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script th:inline="javascript">
    $(function () {
        $('#example2').DataTable({
            "oLanguage": {
                "sUrl": "/AdminStyle/page_zh_CN.json"
            },
            'paging': true,
            'lengthChange': false,
            'searching': false,
            'ordering': true,
            'info': true,
            'autoWidth': false
        });
    });
    $(document).ready(function () {
        var flag = 0;
        if ([[${moren}]]>0) {
            $("#[[${moren}]]").hide();
            $("#[[${moren}]] ~ span").show();
        }
        $("#submit").click(function () {//添加地址
            var address = $("#address").val();
            var postalCode = $("#postalCode").val();
            var persion = $("#persion").val();
            var phone = $("#phone").val();
            var role = 0;
            if ($("#checkbox").is(":checked")) role = 1;
            console.log(address + postalCode + persion + phone);
            $.ajax({
                type: "post",
                url: "/User/address/data",
                data: {
                    address: address,
                    postalCode: postalCode,
                    persion: persion,
                    phone: phone,
                    moren: [[${moren}]],
                    role: role,
                    flag: flag
                },
                success: function (data) {
                    console.log("添加/修改成功？" + data);
                    flag = 0;
                    window.location.href = "/User/useraddress";
                }
            });
        });
        $("a.flag").bind('click', function () {//更改默认地址
            var id = $(this).attr('id');
            console.log(id);
            $.ajax({
                type: "post",
                url: "/User/addressChange/data",
                data: {
                    moren: [[${moren}]],
                    id: id
                },
                success: function (data) {
                    console.log("更改成功？" + data);
                    window.location.href = "/User/useraddress";
                }
            });
        });
        $("a.delete").bind('click', function () {//删除地址
            var id = $(this).parent().next().children("a.flag").attr("id");
            console.log(id);
            $.ajax({
                type: "post",
                url: "/User/addressDelete/data",
                data: {
                    id: id
                },
                success: function (data) {
                    console.log("删除成功？" + data);
                    window.location.href = "/User/useraddress";
                }
            });
        });
        $("a.change").bind('click', function () {
            var id = $(this).parent().next().next().children("a.flag").attr("id");
            var persion = $(this).parent().siblings().eq(0).text();
            var address = $(this).parent().siblings().eq(1).text();
            var postalCode = $(this).parent().siblings().eq(2).text();
            var phone = $(this).parent().siblings().eq(3).text();
            // console.log(persion);
            // console.log(address);
            // console.log(postalCode);
            // console.log(phone);
            $("#persion").val(persion);
            $("#address").val(address);
            $("#postalCode").val(postalCode);
            $("#phone").val(phone);
            flag = id;
            // console.log(flag);
        });
    });
</script>
</body>

</html>